import './style/tabs.less'
import React, { useState } from "react"

export default function ({ tabs, children, className }) {
    const [activeIdx, setActiveIdx] = useState(0)
    const onTabClick = idx => {
        setActiveIdx(idx)
    }
    return <div className={'m-tabs ' + className}>
        <ul className='tab-header' >{tabs.map((tab, idx) =>
            <li className={idx === activeIdx ? 'active' : ''} onClick={() => onTabClick(idx)} key={tab.key }>{tab.content}</li>
        )}</ul>
        <ul className='tab-body'>{children.map((child, idx) =>
            <li style={{ display: idx === activeIdx ? 'initial' : 'none' }} key={Math.random()}>{child}</li>
        )}</ul>

    </div>
}